<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .imgs{
            height: 100%;
        }
        ul{
            height: 100%;
            
        }
        .imgs li {
            float: left;
            width: 20%;
            /* position: absolute; */
            position: relative;
            overflow: hidden;
            height: 100%;
            top: 0;
            transition:0.8s;
        }
         .imgs li:nth-child(3){
                transform-origin: 50% 50%;
         }
        .imgs li img{
            position: absolute;
            top: 0;
            height: 100%;
            display: block;
            transition:0.8s;
        }
        /* .imgs li:nth-child(1){
            left: 0;
        }
        
        .imgs li:nth-child(2){
            left: 20%;
        }
        .imgs li:nth-child(3){
            left: 40%;
        }
        .imgs li:nth-child(4){
            left: 60%;
           
        }
        .imgs li:nth-child(5){
            left: 80%;
           
        } */
        /* .extend{
            left:0;
        } */
        .imgs li:nth-child(1) img{
            left:0;
            transform: translateX(-3rem)
        }
        .imgs li:nth-child(2) img{
            left:0;
            transform: translateX(-3rem)
        }
        .imgs li:nth-child(3) img{
            left: 0;
            transform: translateX(-4rem)
        }
        .imgs li:nth-child(4) img{
            right:0;
            transform: translateX(3rem)
        }
        .imgs li:nth-child(5) img{
            right:0;
            transform: translateX(3rem)
        }
    </style>
</head>
<script src="../public/assets/jquery/jquery.min.js">
</script>
<body>
   <div class="imgs">
       <ul>
           <li><img src="../public/imgs/index/img_terrain1.jpg" alt=""></li>
           <li><img src="../public/imgs/index/img_terrain2.jpg" alt=""></li>
           <li><img src="../public/imgs/index/img_terrain3.jpg" alt=""></li>
            <li><img src="../public/imgs/index/img_terrain4.jpg" alt=""></li>
            <li>
                <img src="../public/imgs/index/img_terrain5.jpg" alt="">
            </li>
       </ul>
   </div>
</body>
<script>
    $(function () {
        $('.imgs li').mouseenter(function () { 
            $(this).css({ 'width': '40%' }).siblings().css({ 'width': '15%' });
            setTimeout(() => {
                $(this).find('img').css({ 'transform': 'translateX(0)' });
            }, 600);
         })
         $('.imgs li').mouseleave(function () {
            $('.imgs li').css({'width':'20%'}).find('img').removeAttr('style');      
           })
    })
</script>
</html>